<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    
</style>
<body>
    <div id="app">
        <p>num: {{num}}</p>
        <p>{{num*2+1}}</p>
        <p>{{doubleNum()}}</p>
        <p>watchNum: {{watchNum}}</p>
        <p><input type="text" v-model="msg"></p>
        <p><button @click="++num">点击num++</button></p>
    </div>
    <script src="./base/vue.min.js"></script>
    <script>

        /*
            做一个效果： num*2+1  效果
                1.{{num*2+1}} 可以实现效果，但是不方便维护管理
                2. 直接封装成一个函数，然后函数内部返回  this.num*2+1
                    好处就是方便维护与管理了
                    缺点就是无关数据变化的时候，doubleNum这个方法也会被调用了。
                    无关数据变化的时候，就会引发视图渲染，doubleNum方法就会被执行了！
                3.  可以通过设置watch监听器实现这个功能。
                    watch可以监听现有数据的变化，然后一旦现有数据发生变化了，就会让一个新的数据改变。
                    逻辑上比较复杂点。


        */

        // var num  =1000;
        new Vue({
            el:"#app",
            data:{
                num:1,
                msg:"hello world",
                watchNum:"" ,//声明一条新的数据
            },
            methods:{
                doubleNum(){ 
                    return this.num*2+1
                }
            },
            watch:{
                // num:function(newValue,oldValue){
                //     this.watchNum = newValue*2+1
                // }
                num:{
                    immediate:true,//第一次就会监听
                    handler(newValue,oldValue){
                        this.watchNum = newValue*2+1
                    }
                }
            }
        })


       
    </script>
</body>
</html>